﻿/* Container - Original Size */

.wrap, .grid12 {width: 992px;} /* Class applied to all elements that span main content width: container, header, etc */
.grid1 {width: 68px;}
.grid2 {width: 152px;}
.grid3 {width: 236px;}
.grid4 {width: 320px;}
.grid5 {width: 404px;}
.grid6 {width: 488px;}
.grid7 {width: 572px;}
.grid8 {width: 656px;}
.grid9 {width: 740px;}
.grid10 {width: 824px;}
.grid11 {width: 908px;}

.grid1-box, .grid2-box, .grid3-box, .grid4-box, .grid5-box, .grid6-box, .grid7-box, .grid8-box, .grid9-box, .grid10-box, .grid11-box, .grid12-box {border: 1px solid #F72E2A; height: auto;}
.grid1-box {width: 66px;}
.grid2-box {width: 150px;}
.grid3-box {width: 234px;}
.grid4-box {width: 318px;}
.grid5-box {width: 402px;}
.grid6-box {width: 486px;}
.grid7-box {width: 570px;}
.grid8-box {width: 654px;}
.grid9-box {width: 738px;}
.grid10-box {width: 822px;}
.grid11-box {width: 906px;}
.grid12-box {width: 990px;}

.grid3-flush {width: 252px;}


/*		Tablet Layout: 768
		Gutters: 16
		Outer margins: 32
-----------------------------------------------------------------
*/

@media only screen and (min-width: 768px) and (max-width: 991px) {
	
.wrap {padding: 0 32px; width: 704px;} /* Class applied to all elements that span main content width: container, header, etc */
.grid1 {width: 44px;}
.grid2 {width: 104px;}
.grid3 {width: 164px;}
.grid4 {width: 223px;} /*Changed from 224px */
.grid5 {width: 284px;}
.grid6 {width: 344px;}
.grid7 {width: 404px;}
.grid8 {width: 464px;}
.grid9 {width: 524px;}
.grid10 {width: 584px;}
.grid11 {width: 644px;}
.grid12 {width: 704px;}

.grid1-box {width: 42px;}
.grid2-box {width: 102px;}
.grid3-box {width: 162px;}
.grid4-box {width: 222px;}
.grid5-box {width: 282px;}
.grid6-box {width: 342px;}
.grid7-box {width: 402px;}
.grid8-box {width: 462px;}
.grid9-box {width: 522px;}
.grid10-box {width: 582px;}
.grid11-box {width: 642px;}
.grid12-box {width: 702px;}

.grid3-flush {width: 180px;}

#pixogram-button, .squigglies {display: none;}

}

@media only screen and (max-width: 991px) {
#pixogram-button, .squigglies {display: none;}
}


/*		Wide Mobile Layout: 480px
		Gutters: 24px
		Outer margins: 26px
------------------------------------------------------------
 */

@media only screen and (min-width: 480px) and (max-width: 767px) {
	
.wrap {padding: 0 26px; width: 428px;}
.grid1 {width: 21px;}
.grid2 {width: 58px;}
.grid3 {width: 95px;}
.grid4 {width: 132px;}
.grid5 {width: 169px;}
.grid6 {width: 206px;}
.grid7 {width: 243px;}
.grid8 {width: 280px;}
.grid9 {width: 317px;}
.grid10 {width: 354px;}
.grid11 {width: 391px;}
.grid12 {width: 428px;}

.grid1-box {width: 19px;}
.grid2-box {width: 56px;}
.grid3-box {width: 93px;}
.grid4-box {width: 130px;}
.grid5-box {width: 167px;}
.grid6-box {width: 204px;}
.grid7-box {width: 241px;}
.grid8-box {width: 278px;}
.grid9-box {width: 315px;}
.grid10-box {width: 352px;}
.grid11-box {width: 389px;}
.grid12-box {width: 426px;}

.grid3-flush {width: 111px;}

}

/*		Mobile Layout: 320px
		Gutters: 16px
		Outer margins: 32px. 
---------------------------------------------
 */
@media only screen and (max-width: 479px) {
.wrap {padding: 0 32px; width: 256px;}
.grid12 {width: 256px;}
.grid12-box {width: 254px;}
}